<!-- eslint-disable no-undef -->
<script setup lang="ts">
import { ref } from 'vue'
import { MobileRules, PasswordRules, CodeRules } from '@/utils/rules'
import { showToast } from 'vant'
import { reqLoginByCode, reqLoginByPassword } from '@/services/user'
import useUserStore from '@/stores/modules/user'
import { useSendCode } from '@/composable'

import router from '@/router'
import axios from 'axios'
// 点击navbar右侧文本处理
const fn = () => {
  console.log('去注册, 订单管理')
}
// 表单关联的两个字段
const mobile = ref('')
const password = ref('')
const { time, sendCode, formRef } = useSendCode(mobile, 'login')
// 同意许可关联的布尔值
const isAgree = ref(false)
const route = useRoute()
console.log(route.query)
// 点击登录按钮的处理函数
const login = async () => {
  // // 1.预校验
  // await formRef.value?.validate()
  // // 2. 同意许可勾选
  if (!isAgree.value) return showToast('请勾选我已同意')
  // 3. 校验通过发送请求
  const res = isPass.value
    ? await reqLoginByPassword(mobile.value, password.value)
    : await reqLoginByCode(mobile.value, code.value)
  // 4. 存储个人信息
  useUserStore().setUser(res.data)
  // 5. 跳转到个人中心
  /* if (route.query.backURL) {
    router.push(route.query.backURL as string)
  } else {
    router.push('/user')
  } */
  router.push((route.query.backURL as string) || '/user')
}
// 切换密码明文和密文的布尔值
const show = ref<boolean>(false)
// 切换验证码登录和密码登录的布尔值
const isPass = ref<boolean>(true)
// 验证码
const code = ref<string>('')

/* onMounted(() => {
  QC.Login({
    btnId: 'qqLoginBtn' //插入按钮的节点id
  })
}) */
// console.log(import.meta.env.VITE_APP_CALLBACK)
// const url = 'https://graph.qq.com/oauth2.0/authorize?client_id=102015968&response_type=token&scope=all&redirect_uri=http%3A%2F%2Fconsult-patients.itheima.net%2Flogin%2Fcallback'
const url =
  `https://graph.qq.com/oauth2.0/authorize?client_id=102015968&response_type=token&scope=all&redirect_uri=` +
  encodeURIComponent(`${import.meta.env.VITE_APP_CALLBACK}/login/callback`)

axios.get('/patient/message/list').then((res) => {
  console.log(res.data)
})
axios.get('/user/list').then((res) => {
  console.log(res.data)
})
</script>
<template>
  <div class="login-page">
    <!-- 导航 -->
    <cp-nav-bar right-text="注册" @handleClickRight="fn"></cp-nav-bar>
    <!-- 头部 -->
    <div class="login-head">
      <h3>{{ isPass ? '密码登录' : '短信验证码登录' }}</h3>
      <a href="javascript:;" @click="isPass = !isPass">
        <span>{{ isPass ? '短信验证码登录' : '密码登录' }}</span>
        <van-icon name="arrow"></van-icon>
      </a>
    </div>
    <!-- 表单 -->
    <van-form ref="formRef" autocomplete="off" @submit="login">
      <van-field
        placeholder="请输入手机号"
        type="text"
        v-model="mobile"
        :rules="MobileRules"
        name="mobile"
      ></van-field>
      <!-- <van-field
        placeholder="请输入密码"
        :type="show ? 'text' : 'password'"
        v-model="password"
        :rules="PasswordRules"
        :right-icon="show ? 'eye-o' : 'closed-eye'"
        @click-right-icon="show = !show"
      ></van-field> -->
      <!-- 密码的输入框 -->
      <van-field
        placeholder="请输入密码"
        :type="show ? 'text' : 'password'"
        v-model="password"
        :rules="PasswordRules"
        v-if="isPass"
      >
        <!-- #button插槽自定制输入框右侧内容 -->
        <template #button>
          <cp-icon
            :name="show ? 'login-eye-on' : 'login-eye-off'"
            @click="show = !show"
          ></cp-icon>
        </template>
      </van-field>
      <!-- 短信验证码的输入框 -->
      <van-field
        v-else
        placeholder="请输入验证码"
        type="text"
        :rules="CodeRules"
        v-model="code"
      >
        <!-- #button插槽自定制输入框右侧内容 -->
        <template #button>
          <span class="btn-send" @click="sendCode" :class="{ active: time }">{{
            time ? `${time}s后发送` : '发送验证码'
          }}</span></template
        >
      </van-field>
      <div class="cp-cell">
        <van-checkbox v-model="isAgree">
          <span>我已同意</span>
          <a href="javascript:;">用户协议</a>
          <span>及</span>
          <a href="javascript:;">隐私条款</a>
        </van-checkbox>
      </div>
      <div class="cp-cell">
        <!-- <van-button block round type="primary" @click="login">登 录</van-button> -->
        <van-button block round type="primary" native-type="submit"
          >登录</van-button
        >
      </div>
      <div class="cp-cell">
        <a href="javascript:;">忘记密码？</a>
      </div>
    </van-form>
    <!-- 底部 -->
    <div class="login-other">
      <!-- <span id="qqLoginBtn"></span> -->
      <van-divider>第三方登录</van-divider>
      <a
        @click="useUserStore().setbackURL($route.query.backURL as string)"
        :href="url"
        class="icon"
      >
        <img src="@/assets/qq.svg" alt="" />
      </a>
    </div>
  </div>
</template>

<style scoped lang="scss">
@import '@/styles/login.scss';
</style>
